<template>
  <div>
    <!-- 触发弹窗的按钮 -->
    <el-button @click="dialogVisible = true">打开对话框</el-button>

    <!-- 弹窗组件 -->
    <el-dialog
        title="确认操作"
        v-model="dialogVisible"
    :before-close="handleClose">
    这是一段文本内容。
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确定</el-button>
        </span>
    </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const dialogVisible = ref(false);  // 使用 ref 保证响应性

function handleClose(done) {
  console.log('Trying to close the dialog');
  done();
}
</script>
